<template>
	<view class="answer-link">
		<view class="answer-condition">
			<view>
				<image v-for="(item, index) in subList" :src="item.imgSrc" :key="index"></image>
			</view>
			<view class="score-achievement">
				<view>
					得分：<text>{{score}}</text>
				</view>
				<view>
					<view style="width: 44upx;height: 44upx;border-radius: 50%;background: #FFFFFF;vertical-align: middle;">
						<image :src="answerAchievementIcon"></image>
					</view>
					<text>+{{achievement}}</text>
				</view>
			</view>
		</view>
		<view v-if="index == listIndex" v-for="(item,index) in subList" :key="index">
			<view class="riddle-subject">
				<!-- 有图有字 -->
				<view class="riddle-topic" v-if="item.image_path">
					<view>
						{{item.title}}
					</view>
					<view></view>
					<image :src="item.image_path" style="width: 100%;height: 354upx;margin-top: 10upx;"></image>
				</view>
				<!-- 无图 -->
				<view class="riddle-topic riddle-subject-no-photo" v-else>
					{{item.title}}
				</view>
				<view :class="item.image_path!=null&&item.image_path!=''?'tip-answer tip-answer-photo':'tip-answer'" style="display: flex;justify-content: space-between;">
					<view>
						<text>解谜成功即可赢取<text style="color: #FF5C46;">“幸运福袋”</text></text>
					</view>
					<!-- <view @click="giveTip(item)" v-if="tipChance>=1">
						<view style="width: 64upx;height: 64upx;margin: 0 auto;position: relative;">
							<image :src="tipIcon" style="width: 64upx;height: 64upx;"></image>
							<view class="riddle-tip">
								{{tipChance}}
							</view>
						</view>
						<view style="font-size: 22upx;color: #00A66A;">
							提示答案
						</view>
					</view> -->
				</view>
			</view>
			<view class="riddle-result">
				<view class="riddle-choose-result" @click="rightAnswers(item.option[0],item,'1')" :class="{'riddle-choose-correct':firstRightCss,'riddle-choose-error':firstErrorCss}">
					{{item.option[0].content}}
					<image v-if="firstErrorCss" class="icon-css" :src="answerImg[0]"></image>
					<image v-if="firstRightCss" class="icon-css" :src="answerImg[1]"></image>
				</view>
				<view class="riddle-choose-result" @click="rightAnswers(item.option[1],item,'2')" :class="{'riddle-choose-correct':secondRightCss,'riddle-choose-error':secondErrorCss}">
					{{item.option[1].content}}
					<image v-if="secondErrorCss" class="icon-css" :src="answerImg[0]"></image>
					<image v-if="secondRightCss" class="icon-css" :src="answerImg[1]"></image>
				</view>
				<view class="riddle-choose-result" @click="rightAnswers(item.option[2],item,'3')" :class="{'riddle-choose-correct':thirdRightCss,'riddle-choose-error':thirdErrorCss}">
					{{item.option[2].content}}
					<image v-if="thirdErrorCss" class="icon-css" :src="answerImg[0]"></image>
					<image v-if="thirdRightCss" class="icon-css" :src="answerImg[1]"></image>
				</view>
			</view>
		</view>
		<!-- 解谜提示 -->
		<!-- <uni-popup ref='popupAnswerTip' :custom="true">
			<view class="popup_riddle_de">
				<image :src="closePopup" style="width: 52upx;height: 52upx;position: absolute;top: 0;right: 0;" @click="closeTipClick"></image>
				<view class="popup_riddle_de_content">
					<view>
						解谜提示
					</view>
					<view style="margin-top: 38upx;">
						<image :src="riddle_icon" style="width: 306upx;height: 210upx;"></image>
					</view>
					<view>
						观看完整视频，为你提示正确答案
					</view>
					<view>
						<image :src="tip_video_icon" ></image>
						<text style="vertical-align: middle;">立即提示</text>
					</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				answerAchievementIcon: this.$store.state.imgUrl + 'img/nominate/answer_achievement-icon.png',
				tipIcon: this.$store.state.imgUrl + 'img/riddle/tip_icon.png',
				closePopup: this.$store.state.imgUrl + 'img/riddle/close_popup.png',
				riddle_icon: this.$store.state.imgUrl + 'img/riddle/riddle_icon.png',
				tip_video_icon: this.$store.state.imgUrl + 'img/riddle/tip_video_icon.png',
				subList: [],
				listIndex: 0,
				firstErrorCss: false,
				firstRightCss: false,
				secondErrorCss: false,
				secondRightCss: false,
				thirdErrorCss: false,
				thirdRightCss: false,
				score: 0,
				achievement:0,
				answerImg: [this.$store.state.imgUrl + 'img/riddle/answer_error_icon.png', this.$store.state.imgUrl +
					'img/riddle/answer_correct_icon.png'
				],
				noAnswerIcon: 'https://lightplanet.tuanhaoke.cn/img/shouzhi.png',
				// 答对或答错
				imgResult: [this.$store.state.imgUrl + 'img/nominate/answer_error.png', this.$store.state.imgUrl +
					'img/nominate/answer_correct.png'
				],
				tipChance: 3
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// 获取金榜题名题目
			getList() {
				let data = {
					token: this.$store.getters.getToken
				}
				this.$api.gettopNominate(data).then(res => {
					if (res.status) {
						this.score = res.fraction
						this.achievement = res.achievementValue
						this.tipChance = res.frequency
						if(res.hasAnswers.length==5) {
							uni.showToast({
								title: '没有答题机会了！',
								icon: 'none',
								duration: 2000
							})
							setTimeout(()=>{
								uni.switchTab({
									url: '../../home'
								})
							},1000)
						}else {
							for (let i = 0; i < res.data.length; i++) {
								if(res.hasAnswers.length<=0) {//从第一题开始答题
									if(i==0) {
										uni.setNavigationBarTitle({
											title: '第'+(i+1)+'题（'+(i+1)+'/5）'
										})
										res.data[i].imgSrc = this.$store.state.imgUrl + 'img/nominate/answering.png'//正在答题
									}else {
										res.data[i].imgSrc = this.noAnswerIcon//没有答题
									}
								}else {// 从第一题之后开始答题
									if(res.new_topic_id==res.data[i].id) {//找到当前正在答题的题目
										res.data[i].imgSrc = this.$store.state.imgUrl + 'img/nominate/answering.png'//正在答题
										uni.setNavigationBarTitle({
											title: '第'+(i+1)+'题（'+(i+1)+'/5）'
										})
										this.listIndex = i
										console.log('listIndex',this.listIndex)
									}else{
										res.data[i].imgSrc = this.noAnswerIcon//没有答题
									}
									// 之前答过题目的样式
									for(let j=0;j<res.hasAnswers.length;j++){
										if(res.data[i].id == res.hasAnswers[j].topic_id) {
											if(res.hasAnswers[j].status==1) {//答错
												res.data[i].imgSrc = this.imgResult[0]
											}else if(res.hasAnswers[j].status==2){//答对
												res.data[i].imgSrc = this.imgResult[1]
											}
										}
									}
								}
							}
							this.subList = res.data
						}
						console.log('获取金榜题名题目',res)
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack({})
						},1000)
					}
				}).catch(err => {
					console.log('获取金榜题名题目',err)
				})
			},
			// 选择答案
			rightAnswers(value, item, flag) {
				let data = {
					token: this.$store.getters.getToken,
					topic_id: item.id,//题名id
					topic_option_id: value.id//选项id
				}
				this.$api.answer_jin(data).then(res => {
					if(res.status) {
						if(value.id==res.option.id) {//答对了
							this.score += 20
							this.achievement+=60
							item.imgSrc = this.imgResult[1]
							if(flag == '1') {
								this.firstRightCss = true
							}else if(flag == '2') {
								this.secondRightCss = true
							}else {
								this.thirdRightCss = true
							}
						}else{//答错了
							item.imgSrc = this.imgResult[0]
							if(flag == '1') {
								this.firstErrorCss = true
							}else if(flag == '2') {
								this.secondErrorCss = true
							}else {
								this.thirdErrorCss = true
							}
						}
						let _this = this
						if (_this.listIndex + 1 === _this.subList.length) {
							uni.redirectTo({
								url: '../answerComplete/answerComplete'
							})
						}else {
							setTimeout(() => {
								_this.listIndex += 1
								_this.subList[_this.listIndex].imgSrc = _this.$store.state.imgUrl + 'img/nominate/answering.png'//正在答题
								uni.setNavigationBarTitle({
									title: '第'+(_this.listIndex+1)+'题（'+(_this.listIndex+1)+'/5）'
								})
								_this.thirdRightCss = false
								_this.thirdErrorCss = false
								_this.secondRightCss = false
								_this.secondErrorCss = false
								_this.firstRightCss = false
								_this.firstErrorCss = false
							}, 500)
						}
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('选择答案',res)
				}).catch(err => {
					console.log('选择答案',err)
				})
			},
			// 提示答案
			giveTip(item) {
				let self = this
				uni.showModal({
					content: '确定消耗一次提示机会？',
					confirmColor: '#00A66A',
					success: function (res) {
					    if (res.confirm) {
							if(self.tipChance>=1) {
								self.tipChance = self.tipChance-1
								let data = {
									token: self.$store.getters.getToken,
									topic_id: item.id,
									isNoNeedLoading: true
								}
								self.$api.prompt_answer(data).then(res => {
									if(res.status) {
										let rightId = res.data.id
										if(item.option[0].id ==rightId) {
											self.firstRightCss = true
										}else if(item.option[1].id ==rightId) {
											self.secondRightCss = true
										}else {
											self.thirdRightCss = true
										}
										self.score += 20
										self.achievement+=60
										item.imgSrc = self.imgResult[1]
										if (self.listIndex + 1 === self.subList.length) {
											uni.redirectTo({
												url: '../answerComplete/answerComplete'
											})
										}else {
											setTimeout(() => {
												self.listIndex += 1
												self.subList[self.listIndex].imgSrc = self.$store.state.imgUrl + 'img/nominate/answering.png'//正在答题
												uni.setNavigationBarTitle({
													title: '第'+(self.listIndex+1)+'题（'+(self.listIndex+1)+'/5）'
												})
												self.thirdRightCss = false
												self.thirdErrorCss = false
												self.secondRightCss = false
												self.secondErrorCss = false
												self.firstRightCss = false
												self.firstErrorCss = false
											}, 2000)
										}
									}else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										})
									}
									console.log('提示答案',res)
								}).catch(err => {
									console.log('提示答案',err)
								})
							}else {
								uni.showToast({
									title: '没有提示机会了！',
									icon: 'none',
									duration: 2000
								})
							}
					    } else if (res.cancel) {
					    }
					}
				})
			}
		}
	}
</script>

<style>
	/* 解谜提示语 */
	.popup_riddle_de {
		width: 590upx;
		height: 688upx;
		position: relative;
	}

	.popup_riddle_de_content {
		width: 100%;
		height: 610upx;
		position: absolute;
		top: 72upx;
		left: 0;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 82upx 60upx 80upx;
		box-sizing: border-box;
		text-align: center;
	}

	.popup_riddle_de_content>view:first-child {
		color: #333;
		font-size: 34upx;
		line-height: 48upx;
	}

	.popup_riddle_de_content>view:nth-child(3) {
		font-size: 28upx;
		color: #333;
		line-height: 40upx;
		margin-top: 40upx;
	}

	.popup_riddle_de_content>view:last-child {
		width: 430upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		background: linear-gradient(#CBEC00, #00A66A);
		box-shadow: 0 8upx 16upx 0 rgba(0, 166, 106, 0.4);
		margin-top: 60upx;
		border-radius: 40upx;
	}

	.popup_riddle_de_content>view:last-child>image {
		width: 40upx;
		height: 28upx;
		vertical-align:
			middle;
		margin-right: 10upx;
	}

	page {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.answer-link {
		width: 100%;
		height: 100%;
		background: url(https://lightplanet.tuanhaoke.cn/img/riddle/answer_bg_img.png);
		background-size: 100% 100%;
		padding: 20upx 30upx;
		box-sizing: border-box;
	}

	.answer-condition {
		width: 100%;
		height: 90upx;
		background: url(https://lightplanet.tuanhaoke.cn/img/nominate/answer_bg_img.png);
		background-size: 100% 100%;
		padding: 18upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.answer-condition image {
		width: 56upx;
		height: 56upx;
		margin-right: 8upx;
	}

	.answer-condition>view:first-child {
		display: flex;
	}

	.score-achievement {
		display: flex;
		justify-content: space-between;
		padding-top: 6upx;
		box-sizing: border-box;
	}

	.score-achievement image {
		display: inline-block;
		width: 32upx;
		height: 32upx;
		margin: 6upx;
	}

	.score-achievement>view:first-child {
		color: #FFFFFF;
		font-size: 28upx;
		line-height: 40upx;
		padding-top: 4upx;
		box-sizing: border-box;
	}

	.score-achievement>view:last-child {
		width: 134upx;
		height: 48upx;
		line-height: 48upx;
		background: rgba(255, 255, 255, 0.6);
		color: #FF5C46;
		font-size: 28upx;
		border-radius: 23upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 4upx;
		box-sizing: border-box;
		margin-left: 34upx;
		padding-right: 18upx;
	}

	.riddle-subject {
		width: 100%;
		/* height: 626upx; */
		background: #fff;
		border-radius: 16upx;
		padding: 30upx 30upx 20upx 30upx;
		box-shadow: 0 8upx 0 0 #139882;
		box-sizing: border-box;
	}

	.riddle-subject .riddle-topic {
		width: 100%;
		height: 465upx;
	}
	.riddle-subject .riddle-subject-no-photo {
		color: #333;
		font-size: 34upx;
		flex-grow: 1;
		display: flex;
		align-items: center;
	}

	.riddle-subject .riddle-topic>view:first-child {
		padding: 8upx 30upx;
		background: #39C65B;
		color: #fff;
		font-size: 30upx;
		display: flex;
		align-items: center;
	}

	.riddle-subject .riddle-topic>view:nth-child(2) {
		border-color: #39C65B transparent transparent transparent;
		border-style: solid;
		border-bottom: transparent;
		border-width: 12upx;
		font-size: 0;
		height: 0px;
		line-height: 0;
		width: 0px;
		margin: 0 auto;
	}

	.riddle-subject .tip-answer {
		font-size: 24upx;
		height: 70upx;
		margin-bottom: 16upx;
	}
	.riddle-subject .tip-answer-photo {
		font-size: 24upx;
		height: 70upx;
		margin-bottom: 16upx;
		margin-top: 32upx;
	}

	.riddle-subject .tip-answer>view:first-child {
		color: #666;
		margin-top: 38upx;
	}

	.riddle-subject .tip-answer>view .riddle-tip {
		width: 24upx;
		height: 24upx;
		border-radius: 50%;
		background: #FDF121;
		border: 0.5px solid #00A66A;
		color: #F73015;
		font-size: 22upx;
		text-align: center;
		line-height: 24upx;
		position: absolute;
		bottom: 8upx;
		right: 0;
	}

	.riddle-result {
		width: 510upx;
		height: 360upx;
		margin: 0 auto;
		margin-top: 64upx;
	}

	.riddle-result .riddle-choose-result {
		height: 88upx;
		background: #fff;
		box-shadow: 0 4upx 0 2upx #13917C;
		border-radius: 44upx;
		text-align: center;
		line-height: 88upx;
		color: #00A66A;
		font-size: 34upx;
		margin-top: 48upx;
	}

	.riddle-choose-result .icon-css {
		width: 32upx;
		height: 32upx;
		position: absolute;
		top: 30upx;
		right: 40upx;
	}

	.riddle-result .riddle-choose-error {
		background: linear-gradient(to right, #FF793E, #FF4040);
		color: #FFFFFF;
		position: relative;
	}

	.riddle-result .riddle-choose-correct {
		background: linear-gradient(#39C812, #7BD326);
		color: #fff;
		position: relative;
	}
</style>
